<template>
    <div class="tab-content">
        <div class="config-form">
            <!-- 点位管理 -->
            <div class="point-management-section">
                <div class="section-header">
                    <h3>点位管理</h3>
                    <el-button type="primary" @click="openAddPointDialog">添加点位</el-button>
                </div>
                
                <el-table :data="pointConfigList" border style="width: 100%">
                    <el-table-column prop="name" label="点位名称" />
                    <el-table-column prop="longitude" label="经度"  />
                    <el-table-column prop="latitude" label="纬度"  />
                    <el-table-column label="配置状态" >
                        <template #default="scope">
                            <el-tag :type="scope.row.configured ? 'success' : 'warning'">
                                {{ scope.row.configured ? '已配置' : '未配置' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="250">
                        <template #default="scope">
                            <el-button size="small" @click="configPointData(scope.row, scope.$index)">配置数据</el-button>
                            <el-button size="small" type="primary" @click="editPointConfig(scope.row, scope.$index)">编辑</el-button>
                            <el-button size="small" type="danger" @click="deletePointConfig(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="save-button-container">
                <el-button type="primary" size="large" @click="savePointConfigData">保存点位配置</el-button>
            </div>
        </div>


        <el-dialog v-model="pointConfigDialogVisible" title="标点配置" width="1200" class="point-dialog">
            <div class="dialog-content">
                <div class="form-section">
                    <h4>标点信息</h4>
                    <el-form ref="pointFormRef" :model="pointForm" :rules="pointRules" label-width="100px">
                        <el-form-item label="点位名称" prop="name">
                            <el-input v-model="pointForm.name" placeholder="请输入点位名称" />
                        </el-form-item>
                        <el-form-item label="经度" prop="longitude">
                            <el-input-number v-model="pointForm.longitude" :precision="6"
                                placeholder="请输入经度" style="width: 100%" />
                        </el-form-item>
                        <el-form-item label="纬度" prop="latitude">
                            <el-input-number v-model="pointForm.latitude" :precision="6" placeholder="请输入纬度"
                                style="width: 100%" />
                        </el-form-item>
                    </el-form>
                </div>

                <div class="map-section">
                    <h4>地图选点</h4>
                    <div id="tmap-container" class="tmap-container"></div>
                    <div class="map-actions">
                        <el-button type="primary" @click="getLocationFromMap">初始化地图/重新获取</el-button>
                        <el-button @click="destroyMap">清除地图</el-button>
                    </div>
                </div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelPoint">取消</el-button>
                    <el-button type="primary" @click="savePoint">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 点位数据配置弹窗 -->
        <el-dialog v-model="pointDataConfigDialogVisible" title="点位数据配置" width="1200px" class="point-data-config-dialog">
            <div class="point-data-config-content">
                <!-- <div class="point-info">
                    <h4>{{ currentConfigPoint.name }}</h4>
                </div> -->
                
                <el-tabs v-model="activePointDataTab" type="border-card">
                    <!-- 模块1: 瞬时功率数据 -->
                    <el-tab-pane label="瞬时功率数据配置" name="module1">
                        <div class="tab-content">
                            <!-- 24小时瞬时功率数据配置 -->
                            <div class="instantaneous-power-section">
                                <div class="section-header">
                                    <h3>24小时瞬时功率数据配置</h3>
                                    <div class="header-actions">
                                        <el-button type="primary" size="small" @click="mapModule1Random">随机填充</el-button>

                                        <el-button type="warning" size="small" @click="clearMapModule1Data">清空数据</el-button>

                                        <el-button type="success" size="small" @click="saveMapModule1Data">保存配置</el-button>
                                    </div>
                                </div>
                                
                                <div class="data-form-container">
                                    <el-form :model="currentConfigPoint.module1Data" label-width="0">

                                        <div class="hour-grid">
                                            <div v-for="(item, index) in currentConfigPoint.module1Data" :key="index" class="hour-item">
                                                <div class="hour-card">
                                                    <div class="hour-header">
                                                        <span class="time-label">{{ item.time }}</span>
                                                        <el-button size="small" type="text" @click="resetHourValueMapModule1Form(item)" class="reset-btn">重置</el-button>
                                                    </div>
                                                    <div class="hour-input">
                                                        <el-input-number 
                                                            v-model="item.value" 
                                                            :min="0" 
                                                            :max="2000" 
                                                            :step="10"
                                                            size="small"
                                                            class="value-input"
                                                            controls-position="right"
                                                        />
                                                        <span class="unit-label">kW</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-form>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 模块2: 发电柱图数据 -->
                    <el-tab-pane label="发电柱图数据" name="module2">
                        <div class="tab-content">
                            <!-- 数据类型选择器 -->
                            <div class="data-type-selector">
                                <el-tabs v-model="currentConfigPoint.module2Data.activeType" class="chart-data-tabs">

                                    <el-tab-pane label="年度数据" name="yearly">
                                        <div class="chart-data-section">
                                            <div class="section-header">
                                                <h4>年度发电数据 (12个月)</h4>
                                                <div class="batch-operations">
                                                    <el-space>
                                                        <el-button size="small" @click="fillRandomChartDataModule2('yearly')">随机填充</el-button>
                                                        <el-button size="small" @click="clearChartDataModule2('yearly')">清空数据</el-button>
                                                    </el-space>
                                                </div>
                                            </div>
                                            <div class="chart-data-table">
                                                <div class="table-header">
                                                    <span>月份</span>
                                                    <span>发电量 (kWh)</span>
                                                    <span>操作</span>
                                                </div>
                                                <div class="table-body">
                                                    <div v-for="(item, index) in currentConfigPoint.module2Data.yearlyData" :key="index" class="table-row">

                                                        <div class="table-cell month-cell">
                                                            <el-tag type="primary">{{ item.month }}月</el-tag>
                                                        </div>
                                                        <div class="table-cell value-cell">
                                                            <el-input-number v-model="item.value" :min="0" :max="100000" size="small" controls-position="right" />
                                                        </div>
                                                        <div class="table-cell action-cell">
                                                            <el-button size="small" type="text" @click="resetChartValueModule2(item)" class="reset-btn">重置</el-button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="月度数据" name="monthly">
                                        <div class="chart-data-section">
                                            <div class="section-header">
                                                <h4>月度发电数据 (30天)</h4>
                                                <div class="batch-operations">
                                                    <el-space>
                                                        <el-button size="small" @click="fillRandomChartDataModule2('monthly')">随机填充</el-button>
                                                        <el-button size="small" @click="clearChartDataModule2('monthly')">清空数据</el-button>
                                                    </el-space>
                                                </div>
                                            </div>
                                            <div class="chart-data-table">
                                                <div class="table-header">
                                                    <span>日期</span>
                                                    <span>发电量 (kWh)</span>
                                                    <span>操作</span>
                                                </div>
                                                <div class="table-body">
                                                    <div v-for="(item, index) in currentConfigPoint.module2Data.monthlyData" :key="index" class="table-row">

                                                        <div class="table-cell day-cell">
                                                            <el-tag type="success">{{ item.day }}日</el-tag>
                                                        </div>
                                                        <div class="table-cell value-cell">
                                                            <el-input-number v-model="item.value" :min="0" :max="10000" size="small" controls-position="right" />
                                                        </div>
                                                        <div class="table-cell action-cell">
                                                            <el-button size="small" type="text" @click="resetChartValueModule2(item)" class="reset-btn">重置</el-button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="日度数据" name="daily">
                                        <div class="chart-data-section">
                                            <div class="section-header">
                                                <h4>日度发电数据 (24小时)</h4>
                                                <div class="batch-operations">
                                                    <el-space>
                                                        <el-button size="small" @click="fillRandomChartDataModule2('daily')">随机填充</el-button>
                                                        <el-button size="small" @click="clearChartDataModule2('daily')">清空数据</el-button>
                                                    </el-space>
                                                </div>
                                            </div>
                                            <div class="chart-data-table">
                                                <div class="table-header">
                                                    <span>时间</span>
                                                    <span>发电量 (kWh)</span>
                                                    <span>操作</span>
                                                </div>
                                                <div class="table-body">
                                                    <div v-for="(item, index) in currentConfigPoint.module2Data.dailyData" :key="index" class="table-row">

                                                        <div class="table-cell time-cell">
                                                            <el-tag type="warning">{{ String(item.hour).padStart(2, '0') }}:00</el-tag>
                                                        </div>
                                                        <div class="table-cell value-cell">
                                                            <el-input-number v-model="item.value" :min="0" :max="1000" size="small" controls-position="right" />
                                                        </div>
                                                        <div class="table-cell action-cell">
                                                            <el-button size="small" type="text" @click="resetChartValueModule2(item)" class="reset-btn">重置</el-button>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>

                            <div class="save-button-container">
                                <el-button type="primary" @click="saveSystemDataModule2">保存发电柱图数据</el-button>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 模块3: 弃电利用量配置 -->
                    <el-tab-pane label="弃电利用量配置" name="module3">
                        <div class="tab-content">
                            <!-- 数据类型选择器 -->
                            <div class="data-type-selector">
                                <el-tabs v-model="currentConfigPoint.module3Data.activeType" class="chart-data-tabs">
                                    <el-tab-pane label="年度数据" name="yearly">
                                        <div class="chart-data-section">
                                            <div class="section-header">
                                                <h4>年度弃电利用数据 (12个月)</h4>
                                                <div class="batch-operations">
                                                    <el-space>
                                                        <el-button size="small" @click="fillRandomDisusedDataModule3('yearly')">随机填充</el-button>
                                                        <el-button size="small" @click="clearDisusedDataModule3('yearly')">清空数据</el-button>
                                                    </el-space>
                                                </div>
                                            </div>
                                            <div class="chart-data-table">
                                                <div class="table-header">
                                                    <span>月份</span>
                                                    <span>弃电利用量 (kWh)</span>
                                                    <span>操作</span>
                                                </div>
                                                <div class="table-body">
                                                    <div v-for="(item, index) in currentConfigPoint.module3Data.yearlyData" :key="index" class="table-row">
                                                        <div class="table-cell month-cell">
                                                            <el-tag type="primary">{{ item.month }}月</el-tag>
                                                        </div>
                                                        <div class="table-cell value-cell">
                                                            <el-input-number v-model="item.value" :min="0" :max="100000" size="small" controls-position="right" />
                                                        </div>
                                                        <div class="table-cell action-cell">
                                                            <el-button size="small" type="text" @click="resetDisusedValueModule3(item)" class="reset-btn">重置</el-button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="月度数据" name="monthly">
                                        <div class="chart-data-section">
                                            <div class="section-header">
                                                <h4>月度弃电利用数据 (30天)</h4>
                                                <div class="batch-operations">
                                                    <el-space>
                                                        <el-button size="small" @click="fillRandomDisusedDataModule3('monthly')">随机填充</el-button>
                                                        <el-button size="small" @click="clearDisusedDataModule3('monthly')">清空数据</el-button>
                                                    </el-space>
                                                </div>
                                            </div>
                                            <div class="chart-data-table">
                                                <div class="table-header">
                                                    <span>日期</span>
                                                    <span>弃电利用量 (kWh)</span>
                                                    <span>操作</span>
                                                </div>
                                                <div class="table-body">
                                                    <div v-for="(item, index) in currentConfigPoint.module3Data.monthlyData" :key="index" class="table-row">
                                                        <div class="table-cell day-cell">
                                                            <el-tag type="success">{{ item.day }}日</el-tag>
                                                        </div>
                                                        <div class="table-cell value-cell">
                                                            <el-input-number v-model="item.value" :min="0" :max="10000" size="small" controls-position="right" />
                                                        </div>
                                                        <div class="table-cell action-cell">
                                                            <el-button size="small" type="text" @click="resetDisusedValueModule3(item)" class="reset-btn">重置</el-button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="日度数据" name="daily">
                                        <div class="chart-data-section">
                                            <div class="section-header">
                                                <h4>日度弃电利用数据 (24小时)</h4>
                                                <div class="batch-operations">
                                                    <el-space>
                                                        <el-button size="small" @click="fillRandomDisusedDataModule3('daily')">随机填充</el-button>
                                                        <el-button size="small" @click="clearDisusedDataModule3('daily')">清空数据</el-button>
                                                    </el-space>
                                                </div>
                                            </div>
                                            <div class="chart-data-table">
                                                <div class="table-header">
                                                    <span>时间</span>
                                                    <span>弃电利用量 (kWh)</span>
                                                    <span>操作</span>
                                                </div>
                                                <div class="table-body">
                                                    <div v-for="(item, index) in currentConfigPoint.module3Data.dailyData" :key="index" class="table-row">
                                                        <div class="table-cell time-cell">
                                                            <el-tag type="warning">{{ String(item.hour).padStart(2, '0') }}:00</el-tag>
                                                        </div>
                                                        <div class="table-cell value-cell">
                                                            <el-input-number v-model="item.value" :min="0" :max="1000" size="small" controls-position="right" />
                                                        </div>
                                                        <div class="table-cell action-cell">
                                                            <el-button size="small" type="text" @click="resetDisusedValueModule3(item)" class="reset-btn">重置</el-button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>

                            <div class="save-button-container">
                                <el-button type="primary" @click="saveDisusedDataModule3">保存弃电利用数据</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    
                    <!-- 模块4: 数据配置 -->
                    <el-tab-pane label="数据配置" name="module4">
                        <div class="tab-content">
                            <el-form ref="monitorFormRef" :model="currentConfigPoint.module4Data" :rules="monitorRules" label-width="150px" class="config-form">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="光伏发电量" prop="solarPower">
                                            <el-input-number v-model="currentConfigPoint.module4Data.solarPower" placeholder="请输入光伏发电量" :controls="false">
                                            </el-input-number>
                                            <span style="font-size: 12px; color: #909399;margin-left: 10px;">kWh</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="绿电直供量" prop="batterySwap">
                                            <el-input-number v-model="currentConfigPoint.module4Data.batterySwap" placeholder="请输入换电量" :controls="false">

                                            </el-input-number>
                                            <span style="font-size: 12px; color: #909399;margin-left: 10px;">kWh</span>

                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="弃电接收量" prop="travel">
                                            <el-input-number v-model="currentConfigPoint.module4Data.travel" placeholder="请输入出行次数" :controls="false">

                                            </el-input-number>
                                            <span style="font-size: 12px; color: #909399;margin-left: 10px;">次</span>

                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="弃电利用量" prop="transport">
                                            <el-input-number v-model="currentConfigPoint.module4Data.transport" placeholder="请输入运力次数" :controls="false">

                                            </el-input-number>
                                            <span style="font-size: 12px; color: #909399;margin-left: 10px;">次</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div class="save-button-container">
                                <el-button type="primary" @click="saveMonitorData">保存能源服务配置</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <!-- 模块5: 弃电接收百分比 -->
                    <!-- <el-tab-pane label="弃电接收百分比" name="module5" v-if="false">
                        <div class="tab-content">
                            <el-form ref="notificationFormRef" :model="currentConfigPoint.module4Data" :rules="notificationRules" label-width="150px" class="config-form">
                                <el-row :gutter="12">
                                    <el-col :span="6">
                                        <el-form-item label="三农中心" label-width="120" prop="agriculture">
                                            <el-input-number v-model="currentConfigPoint.module4Data.agriculture" :min="0" placeholder="数量"
                                                size="small" style="width: 120px" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="物流园" label-width="120" prop="logistics">
                                            <el-input-number v-model="currentConfigPoint.module4Data.logistics" :min="0" placeholder="数量"
                                                size="small" style="width: 120px" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12">
                                    <el-col :span="6">
                                        <el-form-item label="党校" label-width="120" prop="party">
                                            <el-input-number v-model="currentConfigPoint.module4Data.party" :min="0" placeholder="数量"
                                                size="small" style="width: 120px" />
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="环保局" label-width="120" prop="env">
                                            <el-input-number v-model="currentConfigPoint.module4Data.env" :min="0" placeholder="数量"
                                                size="small" style="width: 120px" />
                                        </el-form-item>
                                    </el-col>
                                    
                                </el-row>
                            </el-form>
                            <div class="save-button-container">
                                <el-button type="primary" @click="saveNotificationData">保存弃电接收百分比</el-button>
                            </div>
                        </div>
                    </el-tab-pane> -->
                </el-tabs>
            </div>
            <!-- <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelPointDataConfig">取消</el-button>
                    <el-button type="primary" @click="savePointDataConfig">保存配置</el-button>
                </span>
            </template> -->
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive, toRaw, onMounted, defineProps } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { getDataClassifyDetail, updateDataClassify } from '@/api/port'

    // 定义props
    const props = defineProps({
        module6: {
            type: Array<any>,
            default: () => []
        }
    })

    onMounted(() => {
        console.log(props.module6)
    })

    // ========================================================================================
    // 模块6: 地图标点配置管理
    // ========================================================================================

    // 点位配置相关状态
    const currentPointIndex = ref(-1)
    const pointConfigDialogVisible = ref(false)
    const pointDataConfigDialogVisible = ref(false)
    const activePointDataTab = ref('module1')

    // 点位表单数据
    const pointForm = reactive({
        name: '',
        longitude: 0,
        latitude: 0
    })

    // 点位配置列表数据
    const pointConfigList = ref([] as Array<{
        name: string
        longitude: number
        latitude: number
        configured: boolean
        module1Data: Array<any>
        module2Data: {
            activeType: string
            yearlyData: Array<{ month: number; value: number }>
            monthlyData: Array<{ day: number; value: number }>
            dailyData: Array<{ hour: number; value: number }>
        }

        module3Data: {
            activeType: string
            yearlyData: Array<{ month: number; value: number }>
            monthlyData: Array<{ day: number; value: number }>
            dailyData: Array<{ hour: number; value: number }>
        }
        module4Data: {
            solarPower: number, // 光伏发电
            batterySwap: number, // 换电
            travel: number, // 出行
            transport: number // 运力
            // agriculture: number // 农业
            // logistics: number   // 物流
            // party: number       // 环保
            // env: number         // 环境
        }
    }>)

    // 当前配置的点位数据
    const currentConfigPoint = ref({
        name: '',
        longitude: 0,
        latitude: 0,
        configured: false,
        module1Data: [] as Array<any>,
        module2Data: {
            activeType: '',
            yearlyData: [] as Array<{ month: number; value: number }>,
            monthlyData: [] as Array<{ day: number; value: number }>,
            dailyData: [] as Array<{ hour: number; value: number }>
        },

        module3Data: {
            activeType: '',
            yearlyData: [] as Array<{ month: number; value: number }>,
            monthlyData: [] as Array<{ day: number; value: number }>,
            dailyData: [] as Array<{ hour: number; value: number }>
        },
        module4Data: {
            solarPower: 0, // 光伏发电
            batterySwap: 0, // 换电
            travel: 0, // 出行
            transport: 0 // 运力
            // agriculture: 0, // 农业
            // logistics: 0,   // 物流
            // party: 0,       // 环保
            // env: 0,         // 环境
        }
    })

    // 点位配置验证规则
    const pointRules = {
        name: [{ required: true, message: '点位名称不能为空', trigger: 'blur' }],
        longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
        latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }]
    }

    // 地图相关状态
    const mapInstance = ref<any>(null)
    const mapLoaded = ref(false)

    // 保存所有点位配置数据
    const savePointConfigData = async () => {
        if (pointConfigList.value.length === 0) {
            ElMessage.warning('请至少添加一个地图标点')
            return
        }
        
        await updateDataClassify({
            id: 2,
            key: 'module6',
            value: pointConfigList.value
        })
        console.log('保存所有点位配置数据:', pointConfigList.value)
        ElMessage.success('点位配置数据保存成功！')
    }

    // 打开添加点位对话框
    const openAddPointDialog = () => {
        currentPointIndex.value = -1
        pointForm.name = ''
        pointForm.longitude = 0
        pointForm.latitude = 0
        pointConfigDialogVisible.value = true
        let timer = setTimeout(()=>{
            getLocationFromMap()
            clearTimeout(timer)
        },1000)
    }

    // 配置点位数据
    const configPointData = (point: any, index: number) => {
        currentConfigPoint.value = { ...point }
        currentPointIndex.value = index
        activePointDataTab.value = 'module1'
        pointDataConfigDialogVisible.value = true
    }
    const editPointConfig = (point: any, index: number) => {
        
        pointForm.name = point.name
        pointForm.longitude = point.longitude
        pointForm.latitude = point.latitude

        // pointConfigList.value[index].name = point.name
        // pointConfigList.value[index].longitude = point.longitude
        // pointConfigList.value[index].latitude = point.latitude

        currentPointIndex.value = index
        pointConfigDialogVisible.value = true

        let timer = setTimeout(()=>{
            getLocationFromMap()
            clearTimeout(timer)
        },1000)
    }

    const deletePointConfig = (index: number) => {
        ElMessageBox.confirm('确定要删除这个点位吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            pointConfigList.value.splice(index, 1)
            ElMessage.success('删除成功！')
            updataFun()

        })
    }








    // 点位表单引用
    const pointFormRef = ref()

    // 保存点位信息
    const savePoint = async () => {
        if (!pointFormRef.value) return
        
        try {
            await pointFormRef.value.validate()
            
            // 创建点位数据对象
            let obj = {
                name: pointForm.name,
                longitude: pointForm.longitude,
                latitude: pointForm.latitude,
                configured: false,
                module1Data: mapModule1Form.data,

                module2Data: generateForm.value,
                module3Data: disusedForm.value,
                module4Data: monitorForm.value
            }

            if (currentPointIndex.value >= 0) {
                // 编辑模式
                pointConfigList.value[currentPointIndex.value] = obj
                ElMessage.success('标点更新成功')
            } else {
                // 新增模式
                pointConfigList.value.push(obj)
                ElMessage.success('标点添加成功')
            }
            updataFun()


            pointConfigDialogVisible.value = false
        } catch (error) {
            ElMessage.warning('请填写完整的标点信息')
        }
    }

    const updataFun = async () => {
        await updateDataClassify({
            id: 2,
            key: 'module6',
            value: pointConfigList.value
        })
        // 关闭点位配置对话框
        pointDataConfigDialogVisible.value = false
        await getDetail()
    }

    // 点位的 模块1
    const mapModule1Form = reactive({
        data: Array.from({ length: 24 }, (_, i) => ({
            hour: i, // X轴数据：0-23小时
            time: `${i.toString().padStart(2, '0')}:00`, // 时间显示格式
            value: 0 // Y轴数据：随机值100-1100
        }))
    })

    // 保存24小时瞬时功率数据
    const saveMapModule1Data = () => {
        // currentConfigPoint.value.module1Data = mapModule1Form.data
        // currentConfigPoint.value.configured = true
        
        if(currentPointIndex.value > 0){
            console.log(currentPointIndex.value)

            pointConfigList.value[currentPointIndex.value].configured = true
        }
        console.log(toRaw(pointConfigList.value))

        updataFun()
        ElMessage.success('24小时瞬时功率数据保存成功')

    }

    // 随机填充24小时瞬时功率数据
    const mapModule1Random = () => {
        currentConfigPoint.value.module1Data.forEach(item => {
            item.value = Math.floor(Math.random() * 1000) + 100
        })
        ElMessage.success('随机数据填充完成！')
    }

    // 清空24小时瞬时功率数据
    const clearMapModule1Data = () => {
        currentConfigPoint.value.module1Data.forEach(item => {
            item.value = 0
        })
        ElMessage.success('数据已清空！')
    }

    // 重置单个小时的数值
    const resetHourValueMapModule1Form = (item: any) => {
        item.value = 0
        ElMessage.success(`${item.time}数据已重置！`)
    }




    // 点位的 模块2
    // 发电柱图数据表单
    const generateForm = ref({

        activeType: 'yearly', // 当前选中的数据类型
        // 年度数据 (12个月)
        yearlyData: Array.from({ length: 12 }, (_, i) => ({
            month: i + 1,
            label: `${i + 1}月`,
            value: 0
        })),
        // 月度数据 (30天)
        monthlyData: Array.from({ length: 30 }, (_, i) => ({
            day: i + 1,
            label: `${i + 1}日`,
            value: 0
        })),
        // 日度数据 (24小时)
        dailyData: Array.from({ length: 24 }, (_, i) => ({
            hour: i,
            label: `${i.toString().padStart(2, '0')}:00`,
            value: 0
        }))
    })
    // 保存发电柱图数据
    const saveSystemDataModule2 = async () => {
        // currentConfigPoint.value.module2Data = generateForm.value
        // currentConfigPoint.value.configured = true
        pointConfigList.value[currentPointIndex.value > 0 ? currentPointIndex.value : 0].configured = true
        updataFun()

    }

    // 重置图表单个数值
    const resetChartValueModule2 = (item: any) => {
        item.value = 0
        ElMessage.success('数值已重置为0')
    }

    // 随机填充图表数据
    const fillRandomChartDataModule2 = (dataType: string) => {
        switch (dataType) {
            case 'yearly':
                currentConfigPoint.value.module2Data.yearlyData.forEach(item => {

                    item.value = Math.floor(Math.random() * 50000) + 10000
                })
                break
            case 'monthly':
                currentConfigPoint.value.module2Data.monthlyData.forEach(item => {

                    item.value = Math.floor(Math.random() * 5000) + 1000
                })
                break
            case 'daily':
                currentConfigPoint.value.module2Data.dailyData.forEach(item => {
                    item.value = Math.floor(Math.random() * 500) + 100
                })
                break
        }
        ElMessage.success('随机数据填充完成！')
    }

    // 清空图表数据
    const clearChartDataModule2 = (dataType: string) => {
        switch (dataType) {
            case 'yearly':
                currentConfigPoint.value.module2Data.yearlyData.forEach(item => {

                    item.value = 0
                })
                break
            case 'monthly':
                currentConfigPoint.value.module2Data.monthlyData.forEach(item => {

                    item.value = 0
                })
                break
            case 'daily':
                currentConfigPoint.value.module2Data.dailyData.forEach(item => {

                    item.value = 0
                })
                break
        }
        ElMessage.success('数据已清空！')
    }


    // 
    // 点位的 模块3
    // 弃电柱图数据表单
    const disusedForm = ref({

        activeType: 'yearly', // 当前选中的数据类型
        // 年度数据 (12个月)
        yearlyData: Array.from({ length: 12 }, (_, i) => ({
            month: i + 1,
            label: `${i + 1}月`,
            value: 0
        })),
        // 月度数据 (30天)
        monthlyData: Array.from({ length: 30 }, (_, i) => ({
            day: i + 1,
            label: `${i + 1}日`,
            value: 0
        })),
        // 日度数据 (24小时)
        dailyData: Array.from({ length: 24 }, (_, i) => ({
            hour: i,
            label: `${i.toString().padStart(2, '0')}:00`,
            value: 0
        }))
    })
    // 保存发电柱图数据
    const saveDisusedDataModule3 = async () => {
        // currentConfigPoint.value.module2Data = generateForm.value
        // currentConfigPoint.value.configured = true
        pointConfigList.value[currentPointIndex.value > 0 ? currentPointIndex.value : 0].configured = true
        updataFun()

    }

    // 重置图表单个数值
    const resetDisusedValueModule3 = (item: any) => {
        item.value = 0
        ElMessage.success('数值已重置为0')
    }

    // 随机填充图表数据
    const fillRandomDisusedDataModule3 = (dataType: string) => {
        switch (dataType) {
            case 'yearly':
                currentConfigPoint.value.module3Data.yearlyData.forEach(item => {

                    item.value = Math.floor(Math.random() * 50000) + 10000
                })
                break
            case 'monthly':
                currentConfigPoint.value.module3Data.monthlyData.forEach(item => {

                    item.value = Math.floor(Math.random() * 5000) + 1000
                })
                break
            case 'daily':
                currentConfigPoint.value.module3Data.dailyData.forEach(item => {
                    item.value = Math.floor(Math.random() * 500) + 100
                })
                break
        }
        ElMessage.success('随机数据填充完成！')
    }

    // 清空图表数据
    const clearDisusedDataModule3 = (dataType: string) => {
        switch (dataType) {
            case 'yearly':
                currentConfigPoint.value.module3Data.yearlyData.forEach(item => {

                    item.value = 0
                })
                break
            case 'monthly':
                currentConfigPoint.value.module3Data.monthlyData.forEach(item => {

                    item.value = 0
                })
                break
            case 'daily':
                currentConfigPoint.value.module3Data.dailyData.forEach(item => {

                    item.value = 0
                })
                break
        }
        ElMessage.success('数据已清空！')
    }


    // 模块5
    // 弃电接收百分比表单
    const notificationForm = ref({
        agriculture: 0, // 农业
        logistics: 0,   // 物流
        party: 0,       // 环保
        env: 0,         // 环境
    })

    // 弃电接收百分比验证规则
    const notificationRules = {
        agriculture: [{ required: true, message: '农业不能为空', trigger: 'blur' }],
        logistics: [{ required: true, message: '物流不能为空', trigger: 'blur' }],
        party: [{ required: true, message: '环保不能为空', trigger: 'blur' }],
        env: [{ required: true, message: '环境不能为空', trigger: 'blur' }],
    }

    const saveNotificationData = () => {
        // currentConfigPoint.value.configured = true
        pointConfigList.value[currentPointIndex.value > 0 ? currentPointIndex.value : 0].configured = true

        updataFun()
    }



    // ======================================= 地图 =============================================================

    // 从地图获取坐标
    const getLocationFromMap = () => {
        // 初始化地图（如果还未初始化）
        if (!mapInstance.value && !mapLoaded.value) {
            initMap()
        } else {
            ElMessage.info('请点击地图获取坐标')
        }
    }

    // 声明腾讯地图全局对象
    declare const TMap: any;

    // 初始化地图实例
    const initMap = () => {
        // 检查SDK是否加载
        if (typeof TMap === 'undefined') {
            ElMessage.error('腾讯地图SDK未加载完成，请稍后再试')
            return
        }

        // 创建地图容器
        const mapContainer = document.getElementById('tmap-container')
        if (!mapContainer) {
            ElMessage.error('地图容器未找到')
            return
        }

        try {
            // 初始化地图实例
            const map = new TMap.Map('tmap-container', {
                center: new TMap.LatLng(37.827724, 117.420507), // 北京坐标
                zoom: 12,
                viewMode: '2D'
            })

            mapInstance.value = map
            mapLoaded.value = true

            // 添加地图点击事件监听
            map.on('click', (evt: any) => {
                const latLng = evt.latLng
                pointForm.longitude = Number(latLng.getLng().toFixed(6))
                pointForm.latitude = Number(latLng.getLat().toFixed(6))
                ElMessage.success(`已获取坐标：${pointForm.longitude}, ${pointForm.latitude}`)
            })

            ElMessage.success('地图初始化成功，请点击地图获取坐标')
        } catch (error) {
            console.error('地图初始化失败:', error)
            ElMessage.error('地图初始化失败，请检查网络连接或API密钥')
        }
    }

    // 销毁地图实例
    const destroyMap = () => {
        if (mapInstance.value) {
            mapInstance.value.destroy()
            mapInstance.value = null
            mapLoaded.value = false
        }
    }

    // 取消点位配置
    const cancelPoint = () => {
        pointConfigDialogVisible.value = false
        destroyMap()
    }

    // ==========================================================================================
    // 模块4：数据配置
    // 能源服务配置表单
    const monitorForm = ref<{
        solarPower: number, // 光伏发电
        batterySwap: number, // 换电
        travel: number, // 出行
        transport: number // 运力
    }>({
        solarPower: 0, // 光伏发电
        batterySwap: 0, // 换电
        travel: 0, // 出行
        transport: 0 // 运力
    })
    // 能源服务配置验证规则
    const monitorRules = {
        solarPower: [{ required: true, message: '光伏发电量不能为空', trigger: 'blur' }],
        batterySwap: [{ required: true, message: '绿电直供量不能为空', trigger: 'blur' }],
        travel: [{ required: true, message: '弃电接收量不能为空', trigger: 'blur' }],

        transport: [{ required: true, message: '弃电利用量不能为空', trigger: 'blur' }]

    }

    // 能源服务表单引用
    const monitorFormRef = ref()

    // 保存能源服务配置数据
    const saveMonitorData = async () => {
        pointConfigList.value[currentPointIndex.value > 0 ? currentPointIndex.value : 0].configured = true
        updataFun()
    }

    const getDetail = async () => {
        const res = await getDataClassifyDetail({
            id: 2
        })
        pointConfigList.value = res.module6
    }

    // 初始回显
    const init = (module: any) => {
        if (module) {
            pointConfigList.value = module
        }
    }

    defineExpose({
        init
    })


</script>
<style scoped>
    .section-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .tmap-container{
        width: 100%;
        height: calc(100% - 100px);
    }

    .config-form{
        width: 100%;
    }

</style>